<template>
    <div class="vip_boxs container">
        <div class="activities_list">
            <div class="table_paging" style="min-height: 700px">
                <div class="card_content_wrapper">
                    <div class="loadMoreList">
                        <el-col
                            :span="24"
                            class="activity_item"
                            :style="{ background: `url(${item.cover})` }"
                            v-for="item in activityZonesData"
                            :key="item.id"
                            @click="goToActivityZone(item.webUrl)"
                        >
                        </el-col>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Zone_list",
});
</script>

<script setup lang="ts">
import { getActivityZones, type activityZonesListType } from "@/api/discovery/activityZones";
import { onMounted, ref } from "vue";

const activityZonesData = ref<activityZonesListType>();

// 获取活动专区列表数据
const getActivityZonesData = async () => {
    try {
        const res = await getActivityZones();
        activityZonesData.value = res.content;
    } catch (e) {
        console.log(e);
    }
};

const goToActivityZone = (url: string) => {
    window.open(url);
};

onMounted(() => {
    getActivityZonesData();
});
</script>

<style lang="less" scoped>
.table_paging {
    width: 100%;
}

.activities_list {
    display: flex;
    justify-content: flex-start;
    margin-top: 21px;

    .activity_item {
        flex-basis: 286px;
        height: 156.5px;
        flex-shrink: 0;
        flex-grow: 0;
        cursor: pointer;
        background-size: cover !important;
        background: #cecece 50%;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 15px;

        &:not(:nth-child(4n)) {
            margin-right: 17.9px;
        }
    }
}

.card_content_wrapper {
    margin-top: 20px;
    padding-bottom: 20px;

    .loadMoreList {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0 auto;
    }
}
</style>
